@import './vm';
@import './common';

.content {
  position: relative;
  // margin-bottom: vW(96);
  padding: vw(90) 0 0 0;
  height: 100vh;
  overflow-y: scroll;
  // box-sizing: border-box;
  z-index: 0;

  &::after {
    content: '';
    display: block;
    height: vw(96);
    visibility: hidden;
    /*设置元素的可见性，hidden代表元素不可见。虽然元素不可见，但是在文档中的位置还占据着。*/
  }

  .banner {
    position: relative;

    img {
      width: 100%;
    }
  }

  .mask-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: vw(104);
    background-color: rgba(0, 0, 0, .3);
    color: #ffffff;

    >p {
      margin-top: vw(24);
      margin-bottom: vw(22);
      font-size: vw(26);
      text-align: center;
    }

    .mask-text {
      display: flex;
      display: -webkit-flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 vw(20) 0 vw(30);
      font-size: vw(17);

      .like {
        display: flex;
        display: -webkit-flex;
        align-items: center;

        .love {
          margin-right: vw(48);

          img {
            margin-right: vw(6);
            width: vw(19);
            height: vw(18);
          }

        }

        .eye {

          img {
            margin-right: vw(6);
            width: vw(21);
            height: vw(12);
          }
        }

      }

      .circle {
        ul {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: vw(78);
          height: vw(10);

          li {
            width: vw(10);
            height: vw(10);
            background-color: rgba(206, 190, 177, .8);
            border-radius: 50%;
          }

          li:first-child {
            background-color: rgba(182, 0, 5, .8);

          }
        }
      }

      .time {
        font-size: vw(17);

      }
    }
  }

  .more {
    height: vw(58);
    display: flex;
    justify-content: center;
    line-height: vw(58);

    >p {
      font-size: vw(22);
      color: #bbbbbb;
    }
  }
}